<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>五子棋对战平台</title>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <!-- 引入样式 -->

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.10.0/lib/theme-chalk/index.css">


  <!-- 引入组件库 -->
  <script src="https://cdn.jsdelivr.net/npm/element-ui@2.10.0/lib/index.js"></script>

  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

  <script th:src="@{/js/msg_util.js}"></script>
  <script th:src="@{/js/util.js}"></script>

</head>
<body>
<div id="app">

  <div class="header">
    五子棋在线对战平台
  </div>
  <div id="main-div">
    <!--    <el-card class="box-card" shadow="never">-->
    <el-form ref="form" :model="form" label-width="100px">

      <el-form-item>
      </el-form-item>
      <el-form-item label="游戏名称" v-if="!showJoin">
        <el-input v-model.trim="form.gameName" maxlength="20" placeholder="不填写则默认由系统生成"></el-input>
      </el-form-item>

      <el-form-item label="游戏编号" v-if="showJoin">
        <el-input v-model.trim="gameId" maxlength="6" placeholder="输入游戏编号一起开始对战"></el-input>
      </el-form-item>

      <el-form-item label="我的昵称">
        <el-input v-model.trim="form.userNick" maxlength="16" placeholder="不填写则默认由系统生成"></el-input>
      </el-form-item>

      <el-form-item label="本页可见">
        <div>
          <el-radio v-model="createHide" label="1" border>隐藏</el-radio>
          <el-radio v-model="createHide" label="0" border>公开</el-radio>
          <br>
          <span style="font-size: 13px; color: #828282">公开：您创建的游戏会显示在本页面，任何玩家在本页面点击游戏均可直接加入</span>
        </div>
      </el-form-item>


      <el-form-item v-if="!showJoin">
        <el-button type="primary" @click="createSubmit" :loading="createLoading">创建游戏</el-button>

        <el-button @click="resetForm">重置</el-button>
        <br>
        <br>
        <el-button type="warning" @click="startManMachineBattle" size="small">开启人机对战</el-button>
      </el-form-item>

      <el-form-item v-if="!showJoin">
        <a href="javascript:void(0);" v-on:click="showJoin = true">我要加入游戏</a>
      </el-form-item>


      <el-form-item v-if="showJoin">
        <el-button type="primary" @click="joinNow" @keyup.enter.native="joinNow">立即加入</el-button>
      </el-form-item>

      <el-form-item v-if="showJoin">
        <a href="javascript:void(0);" v-on:click="showJoin = false">创建游戏</a>
      </el-form-item>

    </el-form>
    <!--    </el-card>-->
    <div class="pub-pizza">
      <div th:if="${#lists.size(SGS)} le 0" style="color: #8c939d">暂无任何公开 或 未开局的游戏</div>
      <div th:if="${#lists.size(SGS)} gt 0" class="open-game-div">
        <div th:each="t:${SGS}" class="game-card">
          <div style="padding: 14px;">
            <div>
              <span th:text="${t.gameName}"></span>
              <span th:text="'游戏ID：'+ ${t.gameId}" class="game-card-id" style="float: right"></span>
            </div>
            <div th:text="'创建玩家：'+ ${t.creatorNick}"></div>
            <div class="bottom clearfix">
              <time class="time" th:text="'创建时间：'+${t.gmtCreated}"></time>
            </div>
            <a href="javascript:void(0);" th:onclick="quickJoin([[${t.gameId}]]);" class="button">加入
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
<div class="footer">
  <div class="foot text-center">&copy;2019-2020 lc All Rights Reserved.
  </div>
</div>

</div>

<script type="text/javascript" th:src="@{/js/my-index.js}"></script>
</body>
<style scoped>

  * {
    margin: 0;
    padding: 0;
  }

  html, body {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    /*overflow: hidden;*/
    /*background-color: #F5F5F5;*/
  }

  html {
    height: 100vh;
  }

  .header {
    font-size: 30px;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 88px;
  }

  .open-game-div {
    overflow: auto;
  }

  .game-card {
    margin-top: 20px;
    align-self: end;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  input {
    background-color: transparent !important;
  }

  hr {
    margin-top: 7px;
    *margin: 0;
    border: 0;
    color: #DCDCDC;
    background-color: #DCDCDC;
    height: 1px
  }

  a {
    text-decoration-line: none;
    font-size: 14px;
    color: #1E90FF;
  }

  .game-card-id {
    color: #1E90FF;
  }

  #main-div {
    width: 48%;
    /*padding-top: 60px;*/
    margin-left: auto;
    margin-right: auto;
  }

  #app {
    height: 100%;
    background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  }


  .footer {
    height: 40px;
    background: #fff;
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .foot {
    font-size: 14px;
    padding-top: 10px;
    color: #000;
    align-content: center;
    text-align: center;
  }

  .pub-pizza {
    padding-left: 30px;
  }
</style>
</html>